script.js

document.addEventListener('DOMContentLoaded', () => {
    // Device dimensions (width × height)
    const deviceDimensions = {
        iPhone: {
            portrait: {
                primary: { width: 1242, height: 2688 },
                alternative: { width: 1284, height: 2778 }
            },
            landscape: {
                primary: { width: 2688, height: 1242 },
                alternative: { width: 2778, height: 1284 }
            }
        },
        iPad: {
            portrait: {
                primary: { width: 2064, height: 2752 },
                alternative: { width: 2048, height: 2732 }
            },
            landscape: {
                primary: { width: 2752, height: 2064 },
                alternative: { width: 2732, height: 2048 }
            }
        },
        iPadPro11: {
            portrait: {
                primary: { width: 1668, height: 2388 },
                alternative: { width: 1668, height: 2388 }
            },
            landscape: {
                primary: { width: 2388, height: 1668 },
                alternative: { width: 2388, height: 1668 }
            }
        }
    };

    // DOM elements
    const imageInput = document.getElementById('imageInput');
    const uploadSection = document.querySelector('.upload-section');
    const iPhoneBtn = document.getElementById('iPhoneBtn');
    const iPadBtn = document.getElementById('iPadBtn');
    const iPadPro11Btn = document.getElementById('iPadPro11Btn');
    const portraitBtn = document.getElementById('portraitBtn');
    const landscapeBtn = document.getElementById('landscapeBtn');
    const dimensionsDisplay = document.getElementById('dimensionsDisplay');
    const originalImageContainer = document.getElementById('originalImageContainer');
    const resizedImageContainer = document.getElementById('resizedImageContainer');
    const originalSizeEl = document.getElementById('originalSize');
    const newSizeEl = document.getElementById('newSize');
    const resizeBtn = document.getElementById('resizeBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const batchProcessBtn = document.getElementById('batchProcessBtn');
    const processingStatusEl = document.getElementById('processingStatus');
    const multipleFilesInput = document.getElementById('multipleFilesInput');
    const singleModeBtn = document.getElementById('singleModeBtn');
    const batchModeBtn = document.getElementById('batchModeBtn');
    const singleModeDiv = document.getElementById('singleMode');
    const batchModeDiv = document.getElementById('batchMode');

    // State
    let currentDevice = 'iPhone';
    let currentOrientation = 'portrait';
    let originalImage = null;
    let resizedImage = null;
    let batchImages = [];
    let processedCount = 0;
    let totalImagesToProcess = 0;
    let currentMode = 'single'; // 'single' or 'batch'

    // Initialize display dimensions
    updateDimensionsDisplay();

    // Event Listeners
    imageInput.addEventListener('change', handleImageSelect);
    uploadSection.addEventListener('dragover', handleDragOver);
    uploadSection.addEventListener('dragleave', handleDragLeave);
    uploadSection.addEventListener('drop', handleDrop);
    
    iPhoneBtn.addEventListener('click', () => switchDevice('iPhone'));
    iPadBtn.addEventListener('click', () => switchDevice('iPad'));
    iPadPro11Btn.addEventListener('click', () => switchDevice('iPadPro11'));
    portraitBtn.addEventListener('click', () => switchOrientation('portrait'));
    landscapeBtn.addEventListener('click', () => switchOrientation('landscape'));
    
    resizeBtn.addEventListener('click', resizeImage);
    downloadBtn.addEventListener('click', downloadImage);
    
    if (multipleFilesInput) {
        multipleFilesInput.addEventListener('change', handleMultipleFiles);
    }
    
    if (batchProcessBtn) {
        batchProcessBtn.addEventListener('click', processBatchImages);
    }
    
    if (singleModeBtn) {
        singleModeBtn.addEventListener('click', () => switchMode('single'));
    }
    
    if (batchModeBtn) {
        batchModeBtn.addEventListener('click', () => switchMode('batch'));
    }

    // Functions
    function switchMode(mode) {
        currentMode = mode;
        
        if (mode === 'single') {
            updateActiveButton(singleModeBtn, batchModeBtn, true);
            singleModeDiv.classList.remove('hidden');
            batchModeDiv.classList.add('hidden');
        } else {
            updateActiveButton(singleModeBtn, batchModeBtn, false);
            singleModeDiv.classList.add('hidden');
            batchModeDiv.classList.remove('hidden');
        }
    }
    
    function handleImageSelect(e) {
        const file = e.target.files[0];
        if (file && file.type.match('image.*')) {
            processImageFile(file);
        }
    }

    function handleDragOver(e) {
        e.preventDefault();
        e.stopPropagation();
        uploadSection.classList.add('dragover');
    }

    function handleDragLeave(e) {
        e.preventDefault();
        e.stopPropagation();
        uploadSection.classList.remove('dragover');
    }

    function handleDrop(e) {
        e.preventDefault();
        e.stopPropagation();
        uploadSection.classList.remove('dragover');
        
        const file = e.dataTransfer.files[0];
        if (file && file.type.match('image.*')) {
            imageInput.files = e.dataTransfer.files;
            processImageFile(file);
        }
    }

    function handleMultipleFiles(e) {
        const files = e.target.files;
        if (files.length > 0) {
            batchImages = [];
            for (let i = 0; i < files.length; i++) {
                if (files[i].type.match('image.*')) {
                    const deviceType = detectDeviceType(files[i].name);
                    const orientation = detectOrientation(files[i]);
                    batchImages.push({
                        file: files[i],
                        deviceType: deviceType,
                        orientation: orientation
                    });
                }
            }
            
            totalImagesToProcess = batchImages.length;
            processingStatusEl.textContent = `Ready to process ${totalImagesToProcess} images`;
            batchProcessBtn.disabled = batchImages.length === 0;
        }
    }
    
    function detectDeviceType(filename) {
        // Detect if iPad or iPhone based on filename
        if (filename.toLowerCase().includes('ipad')) {
            // Detect iPad type (11-inch vs 12.9-inch)
            if (filename.toLowerCase().includes('11-inch')) {
                return 'iPadPro11';
            } else {
                return 'iPad';
            }
        } else {
            return 'iPhone';
        }
    }
    
    function detectOrientation(file) {
        // We'll determine orientation after loading the image
        // For now, default to portrait
        return 'portrait';
    }

    function processImageFile(file) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                originalImage = img;
                
                // Display original image
                originalImageContainer.innerHTML = '';
                originalImageContainer.appendChild(img.cloneNode());
                originalSizeEl.textContent = `Original dimensions: ${img.width} × ${img.height} pixels`;
                
                // Enable resize button
                resizeBtn.disabled = false;
                
                // Clear resized image
                resizedImageContainer.innerHTML = '';
                newSizeEl.textContent = '';
                downloadBtn.disabled = true;
                
                // Auto-detect orientation
                if (img.width > img.height) {
                    switchOrientation('landscape');
                } else {
                    switchOrientation('portrait');
                }
            };
            
            img.src = e.target.result;
        };
        
        reader.readAsDataURL(file);
    }

    function switchDevice(device) {
        currentDevice = device;
        if (device === 'iPhone') {
            updateActiveButton(iPhoneBtn, iPadBtn, true);
            iPadPro11Btn.classList.remove('active');
        } else if (device === 'iPad') {
            updateActiveButton(iPhoneBtn, iPadBtn, false);
            iPadPro11Btn.classList.remove('active');
        } else if (device === 'iPadPro11') {
            iPhoneBtn.classList.remove('active');
            iPadBtn.classList.remove('active');
            iPadPro11Btn.classList.add('active');
        }
        updateDimensionsDisplay();
        
        // If an image is loaded, clear the resized version
        if (originalImage) {
            resizedImageContainer.innerHTML = '';
            newSizeEl.textContent = '';
            downloadBtn.disabled = true;
        }
    }

    function switchOrientation(orientation) {
        currentOrientation = orientation;
        updateActiveButton(portraitBtn, landscapeBtn, orientation === 'portrait');
        updateDimensionsDisplay();
        
        // If an image is loaded, clear the resized version
        if (originalImage) {
            resizedImageContainer.innerHTML = '';
            newSizeEl.textContent = '';
            downloadBtn.disabled = true;
        }
    }

    function updateActiveButton(btn1, btn2, isBtn1Active) {
        if (isBtn1Active) {
            btn1.classList.add('active');
            btn2.classList.remove('active');
        } else {
            btn1.classList.remove('active');
            btn2.classList.add('active');
        }
    }

    function updateDimensionsDisplay() {
        const dimensions = deviceDimensions[currentDevice][currentOrientation].primary;
        const altDimensions = deviceDimensions[currentDevice][currentOrientation].alternative;
        
        dimensionsDisplay.textContent = `${dimensions.width} × ${dimensions.height}px (or ${altDimensions.width} × ${altDimensions.height}px)`;
    }

    function resizeImage() {
        if (!originalImage) return;
        
        const dimensions = deviceDimensions[currentDevice][currentOrientation].primary;
        
        // Create canvas for resizing
        const canvas = document.createElement('canvas');
        canvas.width = dimensions.width;
        canvas.height = dimensions.height;
        
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Calculate scaling and position to maintain aspect ratio
        const originalAspect = originalImage.width / originalImage.height;
        const targetAspect = dimensions.width / dimensions.height;
        
        let drawWidth, drawHeight, drawX, drawY;
        
        if (originalAspect > targetAspect) {
            // Original image is wider than target
            drawHeight = dimensions.height;
            drawWidth = drawHeight * originalAspect;
            drawY = 0;
            drawX = (dimensions.width - drawWidth) / 2;
        } else {
            // Original image is taller than target
            drawWidth = dimensions.width;
            drawHeight = drawWidth / originalAspect;
            drawX = 0;
            drawY = (dimensions.height - drawHeight) / 2;
        }
        
        // Draw the image on canvas
        ctx.drawImage(originalImage, drawX, drawY, drawWidth, drawHeight);
        
        // Convert canvas to image
        const resizedImageUrl = canvas.toDataURL('image/jpeg', 0.9);
        resizedImage = resizedImageUrl;
        
        // Display resized image
        const img = new Image();
        img.onload = function() {
            resizedImageContainer.innerHTML = '';
            resizedImageContainer.appendChild(img);
            newSizeEl.textContent = `Resized dimensions: ${dimensions.width} × ${dimensions.height} pixels`;
            downloadBtn.disabled = false;
        };
        img.src = resizedImageUrl;
    }
    
    function resizeImageFromFile(file, deviceType, orientation, callback) {
        const reader = new FileReader();
        
        reader.onload = function(event) {
            const img = new Image();
            img.onload = function() {
                const dimensions = deviceDimensions[deviceType][orientation].primary;
                
                const canvas = document.createElement('canvas');
                canvas.width = dimensions.width;
                canvas.height = dimensions.height;
                
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                const originalAspect = img.width / img.height;
                const targetAspect = dimensions.width / dimensions.height;
                
                let drawWidth, drawHeight, drawX, drawY;
                
                if (originalAspect > targetAspect) {
                    drawHeight = dimensions.height;
                    drawWidth = drawHeight * originalAspect;
                    drawY = 0;
                    drawX = (dimensions.width - drawWidth) / 2;
                } else {
                    drawWidth = dimensions.width;
                    drawHeight = drawWidth / originalAspect;
                    drawX = 0;
                    drawY = (dimensions.height - drawHeight) / 2;
                }
                
                ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
                
                const resizedImageUrl = canvas.toDataURL('image/jpeg', 0.9);
                callback(resizedImageUrl, file.name);
            };
            
            img.src = event.target.result;
        };
        
        reader.readAsDataURL(file);
    }

    function downloadImage() {
        if (!resizedImage) return;
        
        const link = document.createElement('a');
        link.download = `resized-${currentDevice}-${currentOrientation}.jpg`;
        link.href = resizedImage;
        link.click();
    }
    
    function processBatchImages() {
        if (batchImages.length === 0) return;
        
        processedCount = 0;
        processingStatusEl.textContent = `Processing images: 0/${totalImagesToProcess}`;
        
        batchImages.forEach((imageInfo, index) => {
            // Determine orientation based on image dimensions after loading
            const reader = new FileReader();
            
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    const actualOrientation = img.width > img.height ? 'landscape' : 'portrait';
                    
                    resizeImageFromFile(imageInfo.file, imageInfo.deviceType, actualOrientation, (resizedUrl, filename) => {
                        // Download the resized image
                        const link = document.createElement('a');
                        link.download = `resized-${filename}`;
                        link.href = resizedUrl;
                        link.click();
                        
                        processedCount++;
                        processingStatusEl.textContent = `Processing images: ${processedCount}/${totalImagesToProcess}`;
                        
                        if (processedCount === totalImagesToProcess) {
                            processingStatusEl.textContent = `All ${totalImagesToProcess} images processed!`;
                        }
                    });
                };
                img.src = event.target.result;
            };
            
            reader.readAsDataURL(imageInfo.file);
        });
    }
});